.UChartsRing001 {
	width: 100%;
	background: #ffffff;
	border-radius: 8px;
	margin-bottom: 8px;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	justify-content: center;

	& > .uCharts {
		width: 130px;
		height: 130px;
		margin-right: 32px;

		& > canvas {
			width: 100%;
			height: 100%;
		}
	}

	& > .Box {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& > div {
			display: flex;
			align-items: baseline;
			justify-content: center;
			width: 100%;
			margin-bottom: 4px;

			& > div:first-child {
				font-size: 12px;
				flex: 1;
				height: 12px;
				line-height: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #a5aac1;
			}

			& > div:last-child {
				width: 50px;
				font-size: 22px;
				height: 22px;
				line-height: 22px;
				font-family: DIN Condensed;
				font-weight: bold;
				text-align: right;
			}
		}
	}
}

.UChartsRing002 {
	width: 100%;
	background: #ffffff;
	border-radius: 8px;
	margin-bottom: 8px;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	& > .uCharts {
		& > canvas {
			width: 300px;
			height: 300px;
		}
	}

	& > .Box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		& > div {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin: 4px 0;

			& > div:first-child {
				font-size: 16px;
				font-family: ShuHeiTi;
				font-weight: bold;
			}

			& > div:last-child {
				font-size: 20px;
				font-family: ShuHeiTi;
				font-weight: bold;
			}
		}
	}
}
